<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由传参props的值为函数类型</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  路由传参props的值为函数类型
    设置
    props: route => {
        return {
          uname: "大家的爹",
          age: 30,
          id: route.params.id
        }
      }
    
    接受
    props: ["uname", "age", "id"]
 -->

<body>
  <div id="app">
    <router-link to="/me/1">我的1</router-link>
    <router-link to="/me/2">我的2</router-link>
    <router-link to="/me/3">我的3</router-link>
    <router-link to="/me/4">我的4</router-link>
    <router-link to="/you">你的</router-link>

    <router-view />
  </div>
</body>
<script>
  "use strict";
  const me = {
    props: ["uname", "age", "id"],
    template: `<h1>哈哈儿{{id}}是{{uname}}今年{{age}}岁，笑里藏刀</h1>`
  };
  const you = {
    template: `<h1 style="color: red;">菩提本无树</h1>`
  };

  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/me"
    }, {
      path: "/me/:id",
      component: me,
      // route动态参数对象
      props: route => {
        return {
          uname: "大家的爹",
          age: 30,
          id: route.params.id
        }
      }
    }, {
      path: "/you",
      component: you
    }]
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    router
  });
</script>

</html>